<template>
    <el-card class="user-search" shadow="hover">
        <!-- 输入关键字的表单 -->

        <el-form ref="formRef" :model="searchForm" label-width="100px" size="large">
            <el-row :gutter="10">
                <template v-for="item in searchConfig.formItems" :key="item.prop">
                    <el-col :span="8" :xl="6" :lg="6" :md="8" :sm="12" :xs="24">
                        <el-form-item :label="item.label" :prop="item.prop">
                            <!-- 输入框 -->
                            <template v-if="item.type === 'input'">
                                <el-input
                                    v-model="searchForm[item.prop]"
                                    :autocomplete="item.autocomplete"
                                    :autofocus="item.autofocus"
                                    :autosize="item.autosize"
                                    :clearable="item.clearable"
                                    :disabled="item.disabled"
                                    :form="item.form"
                                    :formatter="item.formatter"
                                    :input-style="item.inputStyle"
                                    :max="item.max"
                                    :maxlength="item.maxlength"
                                    :min="item.min"
                                    :minlength="item.minlength"
                                    :name="item.name"
                                    :parser="item.parser"
                                    :placeholder="item.placeholder"
                                    :prefix-icon="item.prefixIcon"
                                    :readonly="item.readonly"
                                    :resize="item.resize"
                                    :rows="item.rows"
                                    :show-password="item.showPassword"
                                    :show-word-limit="item.showWordLimit"
                                    :size="item.inputSize"
                                    :step="item.step"
                                    :suffix-icon="item.suffixIcon"
                                    :tabindex="item.tabindex"
                                    :type="item.inputType"
                                    :validate-event="item.validateEvent"
                                    style="width: 220px"
                                />
                            </template>

                            <!-- 时间选择器 -->
                            <template v-if="item.type === 'time-picker'">
                                <el-time-select
                                    v-model="searchForm[item.prop]"
                                    :clear-icon="item.clearIcon"
                                    :clearable="item.clearable"
                                    :default-value="item.defaultValue"
                                    :disabled="item.disabled"
                                    :editable="item.editable"
                                    :end="item.end"
                                    :format="item.format"
                                    :placeholder="item.placeholder"
                                    :prefix-icon="item.prefixIcon"
                                    :size="item.size"
                                    :start="item.start"
                                    :step="item.step"
                                />
                            </template>

                            <!-- 日期选择器 -->
                            <template v-if="item.type === 'date-picker'">
                                <div class="datepicker" style="width: 220px">
                                    <el-date-picker
                                        :id="item.id"
                                        v-model="searchForm[item.prop]"
                                        :cell-class-name="item.cellClassName"
                                        :clear-icon="item.clearIcon"
                                        :default-time="item.defaultTime"
                                        :default-value="item.defaultValue"
                                        :disabled="item.disabled"
                                        :disabled-date="item.disabledDate"
                                        :editable="item.editable"
                                        :end-placeholder="item.endPlaceholder"
                                        :format="item.format"
                                        :name="item.name"
                                        :placeholder="item.placeholder"
                                        :popper-class="item.popperClass"
                                        :popper-options="item.popperOptions"
                                        :prefix-icon="item.prefixIcon"
                                        :range-separator="item.rangeSeparator"
                                        :readonly="item.readonly"
                                        :shortcuts="item.shortcuts"
                                        :size="item.size"
                                        :start-placeholder="item.startPlaceholder"
                                        :teleported="item.teleported"
                                        :type="item.DatePickerType"
                                        :unlink-panels="item.unlinkPanels"
                                        :validate-event="item.validateEvent"
                                        :value-format="item.valueFormat"
                                        style="width: 100%"
                                    ></el-date-picker>
                                </div>
                            </template>

                            <!-- 下拉框 -->
                            <template v-if="item.type === 'select'">
                                <el-select
                                    v-model="searchForm[item.prop]"
                                    :allow-create="item.allowCreate"
                                    :aria-label="item.ariaLabel"
                                    :autocomplete="item.autocomplete"
                                    :automatic-dropdown="item.automaticDropdown"
                                    :clear-icon="item.clearIcon"
                                    :clearable="item.clearable"
                                    :collapse-tags="item.collapseTags"
                                    :collapse-tags-tooltip="item.collapseTagsTooltip"
                                    :default-first-option="item.defaultFirstOption"
                                    :disabled="item.disabled"
                                    :effect="item.effect"
                                    :filter-method="item.filterMethod"
                                    :filterable="item.filterable"
                                    :fit-input-width="item.fitInputWidth"
                                    :loading="item.loading"
                                    :loading-text="item.loadingText"
                                    :max-collapse-tags="item.maxCollapseTags"
                                    :multiple="item.multiple"
                                    :multiple-limit="item.multipleLimit"
                                    :name="item.name"
                                    :no-data-text="item.noDataText"
                                    :no-match-text="item.noMatchText"
                                    :persistent="item.persistent"
                                    :placeholder="item.placeholder"
                                    :placement="item.placement"
                                    :popper-class="item.popperClass"
                                    :popper-options="item.popperoptions"
                                    :remote="item.remote"
                                    :remote-method="item.remoteMethod"
                                    :remote-show-suffix="item.remoteShowSuffix"
                                    :reserve-keyword="item.reserveKeyword"
                                    :size="item.selectSize"
                                    :suffix-icon="item.suffixIcon"
                                    :suffix-transition="item.suffixTransition"
                                    :tag-type="item.tagType"
                                    :teleported="item.teleported"
                                    :validate-event="item.validateEvent"
                                    :value-key="item.valueKey"
                                    style="width: 220px"
                                >
                                    <template v-if="item.hasOwnProperty('options')">
                                        <template
                                            v-for="option of item.options"
                                            :key="option.value"
                                        >
                                            <el-option
                                                :label="option.label"
                                                :value="option.value"
                                            />
                                        </template>
                                    </template>
                                    <template v-else>
                                        <template
                                            v-for="option of dcitData[item.prop]"
                                            :key="option.code"
                                        >
                                            <el-option :label="option.item1" :value="option.code" />
                                        </template>
                                    </template>
                                </el-select>
                            </template>

                            <!-- 自定义 -->
                            <template v-if="item.type === 'custom'">
                                <slot :name="item.slotName"></slot>
                            </template>
                        </el-form-item>
                    </el-col>
                </template>
            </el-row>
        </el-form>

        <!-- 重置和搜索的按钮 -->
        <div class="btn">
            <slot name="custombtn"></slot>
            <el-button icon="Refresh" @click="handleResetClick">重置</el-button>
            <el-button icon="Search" type="primary" @click="handleQueryClick"> 查询</el-button>
        </div>
    </el-card>
</template>

<script lang="ts" setup>
import { getSysDict } from "@/api/common/common"
import { ElCol, ElForm } from "element-plus"
import { reactive, ref } from "vue"

// 定义自定义事件
interface IProps {
    searchConfig: {
        formItems: any[]
    }
    otherInfo?: any
}

const emit = defineEmits(["queryClick", "resetClick"])
const props = defineProps<IProps>()
const dcitData = ref<any>({})

// 定义用户搜索的数据

const initialForm: any = {}
for (const item of props.searchConfig.formItems) {
    initialForm[item.prop] = item.initialValue ?? ""
}
const searchForm = reactive<any>(initialForm)

// 重置的操作
const formRef = ref<InstanceType<typeof ElForm>>()

function handleResetClick() {
    // 重置输入的数据
    formRef.value?.resetFields()
    // 将事件传递出去，content重新发送请求
    emit("resetClick")
}

function resetFields() {
    formRef.value?.resetFields()
}

//获取下拉框字典项
function getAllDictData() {
    props.searchConfig.formItems.forEach((item: any) => {
        if (item.type === "select" && !item.hasOwnProperty("options")) {
            getSysDict(item.params).then((res) => {
                if (res.code == 0) {
                    dcitData.value[item.prop] = res.data
                }
            })
        }
    })
}

getAllDictData()

/**
 * 处理查询点击事件
 */
function handleQueryClick() {
    const processedForm = { ...searchForm }

    props.searchConfig.formItems.forEach((item: any) => {
        if (
            item.type === "select" &&
            item.hasOwnProperty("multiple") &&
            Array.isArray(processedForm[item.prop])
        ) {
            processedForm[item.prop] = processedForm[item.prop].toString()
        }
    })

    let infoData = processedForm
    if (props.otherInfo) {
        infoData = { ...processedForm, ...props.otherInfo }
    }
    emit("queryClick", infoData)
}

defineExpose({ resetFields })
</script>

<style lang="scss" scoped>
.user-search {
    background-color: #fff;
    margin-bottom: 10px;
}

:deep(.el-card__body) {
    padding: 10px;
}

.el-form-item {
    // padding: 10px;
    margin-bottom: 10px;
}

.btn {
    text-align: right;
    // padding: 0 50px 10px 0;

    .el-button {
        height: 36px;
    }
}

/* 日期选择器宽度100% */
.datapicker {
    width: 100%;
}

:deep(.el-input__wrapper) {
    width: 87%;
}

:deep(.el-form .el-form-item:last-of-type) {
    margin-bottom: 10px !important;
}
</style>
@/api/common/common
